<template>
  <div class="qt_detail">
      <h4>配送员列表>配送员详情</h4>
      <div class="container" style="padding:0;">
          <div class="baseInfo">
               <h4>基础信息</h4>
                <div class="info">
                    <div>真实姓名：{{deliverDetail.realName}}</div> 
                    <div>联系方式：{{deliverDetail.tel}}</div>   
                    <div>所属区域：{{deliverDetail.address}}</div>  
                    <div>状态：{{deliverDetail.isDeleted == 0 ? '可用':'禁用'}}</div>
                    <div>密码：
                        <span v-if="de_flag==0">{{de_flag==0?deliverDetail.identiCode:againMima}}</span>
                        <el-input v-model="againMima" placeholder="请输入密码" style='display:inline-block;width:150px;' v-if="de_flag==1"></el-input>
                    </div>
                    <div >
                        <span @click="deReMima" v-if="de_flag==0" class="reMina">重置密码</span>
                        <span v-if="de_flag==1" @click="deSave" style="margin-left:-175px;" class="eMina">保存</span>
                    </div>
                </div>
          </div>
          <!-- 配送统计 -->
          <div class="order_count">
              <h4>配送统计</h4>
              <div class="box">
                 <div class="title" >
                     <el-date-picker
                            v-model="value4"
                            type="month"
                            placeholder="选择年月"
                            value-format="yyyy-MM">
                    </el-date-picker>
                   <!-- <el-button type="primary" size="mini" @click="searchOrder()">搜索</el-button> -->
                   <div class="right" style="float:right;font-size:14px;">
                       <span >配送订单：{{countOrderNum}}笔</span>
                       <span style="margin-left:100px;">处理龙虾：{{countRealWeight}}斤</span>
                       <span style="margin-left:100px;">实际质量：{{countRealWeight}}斤</span>
                   </div>
                 </div>
                 <el-table  :data="tableOrder" border  style="width: 100%" :header-cell-style="rowClass">
                    <el-table-column type="index"  width="80" label="序号" align="center"></el-table-column>
                    <el-table-column
                        prop="orderId"
                        label="订单编号"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="buyAmount"
                        label="订单总量"
                        width="180" align="center">
                    </el-table-column>
                    <el-table-column
                        prop="realWeight"
                        label="实际质量" align="center">
                    </el-table-column>
                     <el-table-column
                        prop="receiveTime"
                        label="送达时间" align="center">
                    </el-table-column>
                 </el-table>
                 <el-pagination  background  layout="prev, pager, next" :total="total" style="text-align:left;"
                                @current-change="getPageNum">
                </el-pagination>
              </div>
          </div>
         
      </div>
  </div>
</template>
<script>
import { deliverDetail,deliverCount,deliveryZone  } from '@/request/api'
export default {
    data(){
      return {
          value4: '2018-08',
          tableOrder: [],
          deliverDetail:{},
          countCaseNum:'',  // 处理龙虾
          countOrderNum:'', // 配送订单
          countRealWeight:'', // 实际质量
          total:0,
          pageSize:10,
          pageNum:1,
          de_flag:0,//是否重置密码
          againMima:'',//重置密码
      }
    },
    created(){
       console.log(this.value4);
       this.get_deliverDetail();
        var date =  new Date;
       var year=date.getFullYear(); 
       var month= date.getMonth()+1;
       if( month < 10) {
            month = '0' + month
       }
       this.value4 = year + '-' + month;    
    },
    mounted(){
       this.get_deliverCount();
    },
    methods:{
       searchOrder(){
           this.get_deliverCount();
       },
       getPageNum(e){
          this.pageNum = e;
          this.get_deliverCount();
       },
       rowClass({ row, rowIndex}) {
            console.log(rowIndex) //表头行标号为0
            return 'background:#ebeef5'
       },
       get_deliverDetail(){
           deliverDetail({
               id:this.$route.params.id
           }).then(res => {
               if(res.code == 1) {
                   this.deliverDetail =  res.data;
               }
           })
       },
       get_deliverCount(){
           deliverCount({
              id:this.$route.params.id,
              date:this.value4,
              pageNum:this.pageNum,
              pageSize:this.pageSize
           }).then(res => {
               this.total = res.orderList.total;
               this.tableOrder = res.orderList.rows;
               this.countCaseNum = res.countCaseNum;
               this.countOrderNum = res.countOrderNum;
               this.countRealWeight = res.countRealWeight;
           })
        },
        deReMima(){
           this.de_flag=1;
           this.againMima=this.deliverDetail.identiCode;
       },
       //点击保存 
       deSave(){
        this.de_flag=0;
        deliveryZone({
          id:this.$route.params.id,
          newPassword:this.againMima
        }).then(res=>{
            if(res.code == 1){
              this.$message.success('修改成功');
              this.get_deliverDetail();
            }
        })

       }   
    }

 }
</script>
<style  scoped>
.qt_detail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    display: flex;
    padding: 0  30px;
    
}
.container .info  div {
    margin-right:100px;
}
.order_count .box, .approve_count .box {
    padding: 10px  30px;
}
.reMina{
 color:blue;
}
</style>